'use strict'

import React, { Component } from 'react'
import * as helper from '../../utilities/helper'
import * as layout from '../../configs/layout'
import * as color from '../../configs/color'
import * as style from '../../configs/style'

const containerStyle = {
    width: '100%',
    height: '46px',
    background: color.WHITE,
    paddingLeft: layout.HORIZONTAL_PADDING,
    paddingRight: layout.HORIZONTAL_PADDING
}

const inputStyle = {
    fontSize: '16px',
    color: color.DARK
}

const buttonStyle = {
    width: '80px',
    textAlign: 'right',
    fontSize: '13px',
    color: color.HIGHLIGHT,
    borderLeft: style.BORDER
}

let lazyValidateTimer = null
let countdownTimer = null
let countdownInterval = null

export default class SMSValidateBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            countdown: {
                on: false,
                remain: 0
            },
            isValid: false,
            value: this.props.value
        }
        this.handleBlur = this.handleBlur.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.validate = this.validate.bind(this)
        this.lazyValidate = this.lazyValidate.bind(this)
        this.startCountdown = this.startCountdown.bind(this)
        this.stopCountdown = this.stopCountdown.bind(this)
    }

    componentWillUnmount() {
        this.stopCountdown()
    }

    handleChange(event) {
        let value = event.target.value
        this.setState({value: value})
    }

    validate() {
        let isValid = true
        const value = this.state.value

        if (this.props.required && !value) {
            isValid = false
        } else if (this.props.pattern) {
            isValid = this.props.pattern.test(value)
        } else if (this.props.externalValidate) {
            isValid = true
        }

        this.setState({isValid: isValid})
    }

    stopCountdown() {
        clearInterval(countdownInterval)
    }

    startCountdown() {
        this.stopCountdown()
        clearTimeout(countdownTimer)
        this.setState({
            countdown: {
                on: true,
                remain: this.props.requireDuration
            }
        })

        countdownInterval = setInterval(() => {
            let remain = this.state.countdown.remain - 1
            this.setState({
                countdown: {
                    on: remain > 1,
                    remain: remain
                }
            })
        }, 1000)

        countdownTimer = setTimeout(() => {
            clearInterval(countdownInterval)
        }, this.props.requireDuration * 1000)

    }

    lazyValidate() {
        clearTimeout(lazyValidateTimer)
        setTimeout(() => {
            this.validate()
            this.props.onComplete.call(null, this.state.value)
        }, 250)
    }

    handleBlur() {
        this.validate()
        this.props.onComplete.call(null, this.state.value)
    }

    render() {
        return (
            <div className="flex-h flex-vc" style={helper.combineStyles(containerStyle, {}, '', this.props.style)}>
                <input className="flex1"
                       type="text"
                       onChange={this.handleChange}
                       style={inputStyle}
                       placeholder={this.props.placeholder}
                       value={this.state.value}
                       onBlur={this.handleBlur}
                       onKeyUp={this.lazyValidate}
                    />
                <div className="" onClick={this.props.onRequire} style={buttonStyle}>{this.state.countdown.on ? '请等待' + this.state.countdown.remain + '秒': this.props.button}</div>
            </div>
        )
    }
}

SMSValidateBox.defaultProps = {
    value: '',
    required: true,
    requireDuration: 60,
    pattern: /^\d{4}$/,
    externalValidate: false,
    placeholder: '验证码',
    button: '获取验证码'
}

SMSValidateBox.propTypes = {
    onRequire: React.PropTypes.func
}
